var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "maishu-dilu", "services/member", "maishu-services-sdk", "maishu-ui-toolkit", "controls/image-manager", "services/service", "site"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const maishu_dilu_1 = require("maishu-dilu");
    const member_1 = require("services/member");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const ui = require("maishu-ui-toolkit");
    const image_manager_1 = require("controls/image-manager");
    const service_1 = require("services/service");
    const site_1 = require("site");
    let { protocol, port, host } = location;
    let storeHomeUrl = `${protocol}//${host}/user/?appKey=${service_1.Service.appToken}`;
    class StationIndexPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = { store: {} };
            let app = this.props.app;
            this.memberServie = this.props.createService(member_1.MemberService);
            this.imageService = new maishu_services_sdk_1.ImageService((err) => app.error.fire(app, err, app.currentPage)); //this.props.createService(ImageService);
        }
        save() {
            return __awaiter(this, void 0, void 0, function* () {
                let isValid = yield this.validator.check();
                if (!isValid)
                    return Promise.reject({});
                return this.memberServie.saveStore(this.state.store);
            });
        }
        componentDidMount() {
            return __awaiter(this, void 0, void 0, function* () {
                let { required } = maishu_dilu_1.rules;
                this.validator = new maishu_dilu_1.FormValidator(this.element, { name: "name", rules: [required("店铺名称不能为空")] });
                let qrcode = new QRCode(this.qrcodeElement, {
                    text: site_1.default.userClientUrl,
                    width: 160,
                    height: 160,
                });
                qrcode.makeCode(site_1.default.userClientUrl);
                // let storeId = site.appIdFromLocation();
                let store = yield this.memberServie.getStore();
                store = store || {};
                this.setState({ store });
                this.nameInput.value = store.Name;
            });
        }
        render() {
            let { store } = this.state;
            return (React.createElement("div", { className: "station-index", ref: e => this.element = e || this.element },
                React.createElement("ul", { className: "nav nav-tabs" },
                    React.createElement("li", { className: "dropdown pull-right" },
                        React.createElement("button", { className: "btn btn-sm btn-primary dropdown-toggle", "data-toggle": "dropdown" },
                            React.createElement("i", { className: "icon-sitemap" }),
                            React.createElement("span", null, "\u8BBF\u95EE\u5E97\u94FA")),
                        React.createElement("div", { className: "dropdown-menu dropdown-menu-right", style: { padding: 20 } },
                            React.createElement("div", { style: { width: '100%', textAlign: 'center' } }, "\u624B\u673A\u626B\u7801\u8BBF\u95EE"),
                            React.createElement("div", { style: { width: 180, height: 180, padding: 10 }, ref: (e) => this.qrcodeElement = e || this.qrcodeElement }),
                            React.createElement("div", { style: { width: '100%' } },
                                React.createElement("button", { className: "pull-left btn-link", ref: (e) => {
                                        if (!e)
                                            return;
                                        var clipboard = new ClipboardJS(e, {
                                            text: function () {
                                                return storeHomeUrl;
                                            }
                                        });
                                        clipboard.on('success', function (e) {
                                            ui.toast('商品链接已经成功复制');
                                        });
                                        clipboard.on('error', function (e) {
                                            ui.alert('商品链接已经成功失败');
                                        });
                                    } }, "\u590D\u5236\u9875\u9762\u94FE\u63A5"),
                                React.createElement("div", { className: "pull-right" },
                                    React.createElement("button", { className: "btn-link", onClick: () => {
                                            // let url = userApp.createUrl(siteMap.nodes.home_index);
                                            window.open(storeHomeUrl, "_blank");
                                        } }, "\u7535\u8111\u8BBF\u95EE"))))),
                    React.createElement("li", { className: "pull-right" },
                        React.createElement("button", { className: "btn btn-sm btn-primary", ref: (e) => {
                                if (!e)
                                    return;
                                e.onclick = ui.buttonOnClick(() => this.save(), { toast: "保存成功" });
                            } },
                            React.createElement("i", { className: "icon-save" }),
                            React.createElement("span", null, "\u4FDD\u5B58")))),
                React.createElement("div", { className: "clearfix" }),
                React.createElement("div", { className: "well", style: { minHeight: 100 } },
                    React.createElement("div", { className: "row form-group" },
                        React.createElement("div", { className: "col-lg-12" },
                            React.createElement("label", { className: "col-md-4", style: { width: 120 } }, "\u5E97\u94FA\u540D\u79F0*"),
                            React.createElement("div", { className: "col-md-8", style: { maxWidth: 300 } },
                                React.createElement("input", { name: "name", className: "form-control", onChange: (e) => {
                                        store.Name = e.target.value;
                                        this.setState(this.state);
                                    }, ref: (e) => this.nameInput = e || this.nameInput })))),
                    React.createElement("div", { className: "row form-group" },
                        React.createElement("div", { className: "col-lg-12" },
                            React.createElement("label", { className: "col-md-4", style: { width: 120 } }, "\u5E97\u94FA\u56FE\u6807"),
                            React.createElement("div", { className: "col-md-8", style: { maxWidth: 300 } },
                                React.createElement("img", { className: "img-responsive", title: "\u70B9\u51FB\u4E0A\u4F20\u5E97\u94FA\u56FE\u6807", src: store.ImagePath ? this.imageService.imageSource(store.ImagePath) : null, ref: (e) => {
                                        if (!e)
                                            return;
                                        ui.renderImage(e, { imageSize: { width: 300, height: 300 } });
                                        e.onclick = () => {
                                            image_manager_1.default.show((imageIds) => {
                                                store.ImagePath = imageIds[0];
                                                this.setState(this.state);
                                            });
                                        };
                                    } })))))));
        }
    }
    exports.default = StationIndexPage;
});
